<template>
	<view class="myStudent">
		<view class="u-cell-group" v-for="(p, i) in list" :key="i">
			<u-cell-group>
				<u-cell-item class="flex-start" :arrow="false">
					<view class="editBox" slot="title">
						<text class="name">{{p.name}}</text>
						<view class="desc">
							<view class="descItem">
								<text class="label">学校：</text>
								<text>{{p.school}}</text>
							</view>
							<view class="descItem">
								<text class="label">班级：</text>
								<text>{{p.gradeClass}}</text>
							</view>
						</view>
					</view>
					<view class="edit" slot="right-icon">
						<u-icon @click.native="edit(p.id)" name="edit-pen"></u-icon>
					</view>
				</u-cell-item>
				<u-cell-item :arrow="false">
					<view class="focus" slot="title">
						<u-checkbox @change="changeDefault(arguments, i)" shape="circle" v-model="p.defaultStatus">默认关注</u-checkbox>
					</view>
					<view class="del" slot="right-icon">
						<u-icon @click="del(i)" name="trash"></u-icon>
					</view>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="addBtn">
			<u-button type="primary" @click="pathTo('/pages/addChild/addChild')"><text class="iconfont">&#xe61a;</text>添加小孩</u-button>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		data() {
			return {
				list: []
			}
		},
		computed: {
			...mapState(['parentId'])
		},
		async onShow() {
			const getChildList = await this.getChildList()
			this.list = getChildList || []
		},
		methods: {
			edit(id) {
				uni.navigateTo({
					url: `/pages/addChild/addChild?id=${id}`
				})
			},
			confirm(tips) {
				return new Promise((resolve, reject) => {
					uni.showModal({
					    title: '提醒',
					    content: tips,
					    success: function (res) {
					        if (res.confirm) {
					            resolve(true)
					        } else if (res.cancel) {
					            resolve(false)
					        }
					    }
					})
				})
			},
			async changeDefault(args, i) {
				const value = args[0].value
				if (!value) {
					this.$nextTick(() => {
						this.list[i].defaultStatus = 1
					})
				} else {
					for (let j in this.list) {
						if (j != i) {
							this.list[j].defaultStatus = 0
						}
					}
					// 设置默认
					await this.setDefaultChild(this.list[i].id)
					this.$u.toast('已更新默认设置')
				}
			},
			setDefaultChild(id) {
				return this.$http.post('/child/default', {
					parentChildrenId: id
				}).then(res => res.data)
			},
			getChildList() {
				return this.$http.post('/parent/child/list', {
					parentId: this.parentId
				}).then(res => res.data)
			},
			async del(i) {
				const confirm = await this.confirm('确认删除学生')
				if (confirm) {
					await this.delChild(this.list[i].id)
					this.$u.toast('已删除')
					this.list.splice(i, 1)
				}
			},
			delChild(id) {
				return this.$http.post('/child/delete', {
					parentChildrenId: id
				}).then(res => res.data)
			},
			pathTo(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.myStudent {
		.u-cell-group {
			margin: $uni-spacing-col-base 0;
			.editBox {
				display: flex;
				flex-direction: column;
				.name {
					font-size: $uni-font-size-lg;
					border-left: 3px solid $uni-color-primary;
					height: 32rpx;
					line-height: 32rpx;
					padding-left: 20rpx;
					margin-bottom: $uni-spacing-col-base;
				}
				.desc {
					.label {
						color: $uni-text-color-grey;
					}
				}
			}
		}
		.addBtn {
			width: 80%;
			margin: 30rpx auto;
		}
	}
</style>
